<template>
	<view>
		<view class="product-box" :class="column == 2 ? 'bgfff padding' : 'bg-gray'">
			<view class="product-item"  @tap="toDetail" :data-id="product.id" :class="col" v-for="(product,index) in productList" :key="index">
				<view style="position: relative;z-index: 8;">
					<image mode="widthFix" class="product-img" lazy-load="true" :src="product.cover"></image>
				</view>
				<view class="product-left">
					<view class="product-name">
						<text class="product-cate product-num3">{{product.cate_name1}}</text>
						<text class="product-cate product-num4">{{product.cate_name2}}</text>
						<text class="product-cate product-num5">{{product.cate_name3}}</text>
						{{product.name}}
					</view>
					<view class="product-desc" v-if="product.marks.length>0">
						<block v-for="(mark,index1) in product.marks" :key="index1">
							<text class="product-marks" v-if="mark">{{mark}}</text>
						</block>
					</view>
					<view class="product-sale">
						<view>销量{{product.number}}</view>
						<view>
							<span class="price">￥<span>{{product.total}}</span></span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	/**
	 * GridItem 商品两列列表
	 * zlxls
	 */
	export default {
		components: {uniLoadMore},
		name: 'ZlxlsGoodsList',
		props: {
			//产品列表
			productList:{
				type:Array,
				value:[]
			},
			//显示列数1列或者2列
			column:{
				type:Number,
				value:2
			},
			//分页数据状态 more：还有更多数据、noMore：没有更多数据、loadding ：加载中
			status:{
				type:String,
				value:''
			}
		},
		data() {
			return {
				col : 'col-'+this.column
			}
		},
		created() {
			
		},
		beforeDestroy() {
			
		},
		methods: {
			toDetail(e) {
				uni.navigateTo({
					url: '/pages/product/detail?id='+e.currentTarget.dataset.id,
				});
			}
		}
	}
</script>

<style lang="scss">
	.product-cate{
		border: 1rpx solid #4fd216;
		color: #4fd216;
		font-size: 24rpx;
		padding: 4rpx 8rpx;
		margin-right: 8rpx;
	}
	.product-marks{
		margin-right: 8rpx;
	}
	.product-num1{
		border: 1rpx solid #ff6600;
		color: #ff6600;
	}
	.product-num2{
		border: 1rpx solid #f00;
		color: #f00;
	}
	.product-num3{
		border: 1rpx solid #f0ad4e;
		color: #f0ad4e;
	}
	.product-num4{
		border: 1rpx solid  #16baaa;
		color:  #16baaa;
	}
	.product-num5{
		border: 1rpx solid #dd524d;
		color: #dd524d;
	}
	.bg-gray{background-color: #f2f2f2;}
	.padding{padding: 20rpx 4%;}
	.product-box{display: flex;box-sizing: border-box;flex-wrap: wrap;}
	.product-item{box-sizing: border-box;position: relative;z-index: 10;}
	.product-sale{display: flex;justify-content: space-between;color: #999;font-size: 24rpx;width: 100%;}
	.product-left{width: 100%;box-sizing: border-box;}
	.product-name{color: #333;font-size: $uni-font-size-base;overflow: hidden;}
	.product-desc{color: #999;font-size: 26rpx;margin-top: 10rpx;}
	.col-1 {width: 100%;background-color: #fff;display: flex;padding: 15rpx 4%;box-sizing: border-box;}
	.col-1 .product-item{display: flex;}
	.col-1 .product-img{width: 100%;margin-right: 20rpx;}
	.col-1 .product-name{line-height: $uni-font-size-base + 15;height:($uni-font-size-base+15) * 2;}
	.col-1 .product-sale{margin-top: 10rpx;}
	.col-2 {width: 48.5%;margin: 0 0 30rpx 0;background-color: #fff;border-radius: 5px;}
	.col-2:nth-child(odd){margin-right: 3%;}
	.col-2 .product-img{width: 100%; border-radius: 3px;}
	.col-2 .product-name{line-height: $uni-font-size-base + 15;height:($uni-font-size-base+15) * 2;}
	.col-2 .product-sale{margin-top: 10rpx;}
	.col-2 .product-left{padding: 8rpx 20rpx;}
	.price{color: $uni-color-price;}
	.price span{font-size: $uni-font-size-base+2;}
	.del-price{font-size: 20rpx;text-decoration:line-through;margin-right: 20rpx;}
	.tips{position: absolute;z-index: 9;}
	.vip-image{width: 80rpx;}
</style>